<!-- 获取学生卡信息 -->
<template>
    <div class="infos flex-center">
        <div class="box-card">
            <el-card>
                <div class="searchs-btn flex-between">
                    <el-input ref="input" style="flex-grow:1;" maxlength="8" @keyup.enter.native="search" clearable
                        @input="getKey" v-model="keywords" size="small" placeholder="请输入uid查询"></el-input>
                    <!-- <input type="text" autofocus="autofocus" v-model="keywords" placeholder="请输入uid查询"> -->
                    <div class="btns-search" @click="search">搜索</div>
                </div>
                <el-card class=" mr-t-20">
                    <div class="flex">
                        <img :src="datas.themImg" style="width:200px;height: 400px;margin-right: 50px;" />
                        <div>
                            <div class="names">{{types[datas.type]}}</div>
                            <div class="items">姓名：{{datas.person_name||''}}</div>
                            <div class="items">
                                <div>系部班级：</div>
                                <div>{{datas.org_names||''}}</div>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-card>
            <!-- <div class="technical-support">Copyright © 2021 广东省技师学院</div> -->
        </div>

    </div>
</template>

<script>
    import { getCardInfo } from '@/api/login.js'
    export default {
        name: "cardInfo",
        data() {
            return {
                keywords: '',
                datas: {
                    type: '0'
                },
                types: {
                    0: '学生卡',
                    1: '教师卡',
                    2: '职工卡',
                }
            };
        },

        created() { },
        mounted() {
            this.$nextTick(() => {
                this.$refs.input.focus();
            })
        },

        methods: {
            search: function () {
                if (!this.keywords) {
                    return;
                }
                getCardInfo({ uid: this.keywords }).then(res => {
                    if (res.state) {
                        if (res.data.face_url) {
                            res.data.themImg = res.data.face_url.split(",");

                        }
                        this.datas = res.data;
                    } else {
                        this.$message.error(res.msg);
                    }
                    this.keywords = '';
                    this.$refs.input.focus();
                });
            },
            getKey: function () {
                if (this.keywords.length >= 8) {
                    this.search();
                }
            },
        },
    };
</script>

<style lang="scss">
    .flex-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .infos {
        padding: 5% 0;
    }

    .box-card {
        width: 80%;

    }

    .searchs-btn {
        border: 1px solid #eee;
        width: 50%;
        margin: 10px 0;
        height: 80px;
        border-radius: 6px;
        overflow: hidden;
    }

    .el-input--small .el-input__inner {
        height: 100%;
        line-height: auto;
        border: none;
    }

    input,
    .el-input {
        height: 32px;
        line-height: 32px;
        border: none;
        height: 90%;
        font-size: 30px;
        padding: 0 20px;
        flex-grow: 1;
        border: none;
    }

    .flex {
        display: flex;
        align-items: center;
    }

    .btns-search {
        background: red;
        height: 100%;
        width: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        cursor: pointer;
        font-size: 30px;
    }

    .mr-t-20 {
        margin-top: 60px;
    }

    .names {
        font-size: 40px;
        font-weight: 700;
    }

    .items {
        padding-top: 50px;
        font-size: 38px;
        font-weight: 700;
        color: #333;
        display: flex;
    }

    .technical-support {
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.45);
        line-height: 20px;
        display: flex;
        justify-content: center;
        position: absolute;
        bottom: 50px;
    }
</style>